<template>
  <!-- 产品分类导航 -->
  <view
    class="menu-category-box"
    v-if="carousel"
    :style="list.length <= menu ? `height:240rpx` : `height:400rpx`"
  >
    <!-- <view
      class="title-box x-bc"
      @tap="$yrouter.push({ path: '/packageShop/pages/shop/GoodsClass/index' })"
    >
      <text class="title">好物分类</text>
      <view class="group-people x-f">
        <text class="tip">更多</text>
        <text class="cuIcon-right"></text>
        <text class="iconfont icon-more1"></text>
      </view>
    </view> -->

    <swiper
      class="menu-swiper-box"
      :style="list.length <= menu ? `height:200rpx` : `height:340rpx`"
      @change="onSwiper"
      circular
      :autoplay="false"
      :interval="3000"
      :duration="1000"
    >
      <swiper-item
        class="menu-swiper-item"
        v-for="(itemList, index) in carousel"
        :key="index"
        :style="list.length <= menu ? `height:200rpx` : `height:340rpx`"
      >
        <view class="menu-tab-box">
          <view
            class="tab-list y-f"
            :style="{ width: 690 / menu + 'rpx' }"
            v-for="item in itemList"
            :key="item.name"
            @tap="routerTo(item)"
          >
            <image
              class="tab-img Shop-selector-circular"
              :style="{ width: imgW + 'rpx', height: imgH + 'rpx' }"
              :src="item.pic"
            ></image>
            <text class="Shop-selector-rect">{{ item.name }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="menu-category-dots" v-if="carousel.length > 1">
      <text
        :class="
          categoryCurrent === index ? 'category-dot-active' : 'category-dot'
        "
        v-for="(dot, index) in carousel.length"
        :key="index"
      ></text>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      categoryCurrent: 0, //分类轮播下标
    }
  },
  props: {
    list: {
      type: Array,
      default: [],
    },
    menu: {
      default: 4,
    },
    imgW: {
      type: Number,
      default: 100,
    },
    imgH: {
      type: Number,
      default: 100,
    },
  },
  computed: {
    carousel() {
      if (this.list) {
        let list = this.sortData(this.list, this.menu * 2)
        return list
      }
    },
  },
  created() {
    setTimeout(() => {
      console.log('list', this.list)
    }, 5000)
  },
  methods: {
    // 数据分层
    sortData(oArr, length) {
      let arr = []
      let minArr = []
      oArr.forEach(c => {
        if (minArr.length === length) {
          minArr = []
        }
        if (minArr.length === 0) {
          arr.push(minArr)
        }
        minArr.push(c)
      })

      return arr
    },
    // 轮播
    onSwiper(e) {
      this.categoryCurrent = e.detail.current
    },
    // 路由跳转
    routerTo(item) {
      console.log('ddd', item.uniapp_url)
      // 使用正则提取
      const pathMatch = item.uniapp_url.match(/^([^?]+)/);
      const paramMatch = item.uniapp_url.match(/[?&]name=([^&]*)/);
      const pathBeforeQuery = pathMatch ? pathMatch[1] : ''; // "/pages/category/index"
      const nameValue = paramMatch ? decodeURIComponent(paramMatch[1]) : null; // "毛绒玩具"
      console.log('路径部分:', pathBeforeQuery);
      console.log('name参数值:', nameValue);

      uni.setStorage({
        key: 'category_params', // 使用页面路径作为key的一部分
        data: {
          timestamp: Date.now(), // 添加时间戳防止数据过期
          params: {
            name: nameValue
          }
        },
        success: () => {
          // 确保存储成功后再跳转
          uni.switchTab({
            url: pathBeforeQuery
          });
        }
      });

      //this.$yrouter.push('/packageShop' + item.uniapp_url)
      // uni.switchTab({
      //   url: item.uniapp_url,
      // })
      // uni.navigateTo({
      //     url: item.uniapp_url,
      // })
    },
  },
}
</script>

<style lang="scss">
// 产品分类
.y-f {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.menu-category-box {
  padding: 30rpx 30rpx 0 30rpx;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.menu-category-box,
.menu-swiper-box {
  position: relative;
  background: #fff;
  .menu-swiper-item {
    background: #fff;
    height: 100%;
    width: 100%;
  }
  .menu-tab-box {
    display: flex;
    flex-wrap: wrap;
    .tab-list {
      font-size: 24rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
      padding-bottom: 44rpx;

      .tab-img {
        border-radius: 25rpx;
        margin-bottom: 10rpx;
      }
    }
  }

  .menu-category-dots {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20rpx;

    .category-dot {
      width: 40rpx;
      height: 3rpx;
      background: #eeeeee;
      margin-right: 10rpx;
    }

    .category-dot-active {
      width: 40rpx;
      height: 3rpx;
      background: #a8700d;
      margin-right: 10rpx;
    }
  }
}
.title-box {
  padding-bottom: 24rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
  }

  .group-people {
    display: flex;
    align-items: center;
    .icon-more1 {
      color: #999999;
      margin-left: 14rpx;
      position: relative;
      top: 1rpx;
    }
    .time-box {
      font-size: 26rpx;
      color: #edbf62;

      .count-text-box {
        width: 30rpx;
        height: 34rpx;
        background: #edbf62;
        text-align: center;
        line-height: 34rpx;
        font-size: 24rpx;
        border-radius: 6rpx;
        color: rgba(#fff, 0.9);
        margin: 0 8rpx;
      }
    }

    .head-box {
      .head-img {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #ccc;
      }
    }

    .tip {
      font-size: 28rpx;
      padding-left: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .cuIcon-right {
      font-size: 30rpx;
      line-height: 28rpx;
      color: #666;
    }
  }
}
</style>
